<template>
	<view class="container">
		<!-- 消息提示 -->
		<u-toast ref="uToast" />

		<!-- 更新弹窗 -->
		<view>
			<u-popup :show="newVersion" mode="center" round=10 @close="close" @open="open">
				<view style="height: 400px;width: 300px;display: flex;flex-direction: column;">
					<view style="height: 70px;display: flex;flex-direction: column;">
						<text style="font-size: 20px;font-weight: bold;">发现新版本</text>
						<u-divider :text="latestVersion" textColor="#000000" lineColor="#000000"></u-divider>
					</view>
					<view style="height: 230px;display: flex;flex-direction: column;">
						<text>修复已知bug</text>
						<text>优化用户体验</text>
					</view>
					<view style="height: 40px;margin: 0 10px 0 10px;">
						<u-button type="default" @click="download" shape="circle" color="#ffce45" size="normal"
							text="立即升级"></u-button>
					</view>
					<view style="height: 40px;margin: 10px 10px 0 10px">
						<u-button type="default" @click="cancel" shape="circle" color="#d8d8d8" size="normal"
							text="暂不升级"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 下载中弹窗 -->
		<view>
			<u-popup :show="isdownload" mode="center" round=10 @close="close" @open="open">
				<view style="height: 200px;width: 300px;display: flex;flex-direction: column;">
					<view style="height: 50px;">
						<view style="margin-top: 10px;">
							<text style="font-size: 20px;font-weight: bold;">升级APP</text>
						</view>
					</view>
					<view style="height: 60px;">
						<view style="margin-top: 10px;">
							<text style="font-size: 16px;">正在为您更新，请耐心等待</text>
						</view>
					</view>
					<view style="height: 50px;">
						<u-line-progress :percentage="progress" activeColor="#ffaa00"></u-line-progress>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- end -->
		<view style="height: var(--status-bar-height);"></view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
			<view style="display: flex;flex-direction: row;height: auto;width: 100%;">
				<!-- 头像 -->
				<view style="margin-top: 10px;margin-left: 7px;">
					<image style="height: 30px;width: 30px;border-radius: 100%;" :src="profilePhotoUrl"></image>
				</view>
				<!-- 搜索框 -->
				<view style="width: 100%;" @click="searchClick">
					<uni-search-bar placeholder="剧集/电影/动漫/综艺..." bgColor="#EEEEEE" readonly="true" />
				</view>
				<!-- 历史记录 -->
				<view @click="history" style="margin-top: 12px;margin-right: 10px;">
					<image style="height: 33px;width: 33px;" src="/static/img/index/lishijilu.png"></image>
				</view>
			</view>
		</view>
		<!-- ======================================= -->
		<view class="content">
			<!-- 轮播图 -->
			<view class="slideshow">
				<swiper class="slideshow" circular indicator-dots=true autoplay=true interval=2000 duration=500
					indicator-active-color="#ffffff" indicator-color="#a8a8a8">
					<swiper-item v-for="(item,index) in adList" :key="index">
						<image class="slideshow-item" :src="item.url"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 滚动通知 -->
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<u-notice-bar :text="inform"></u-notice-bar>
				</view>
			</view>
			<!-- 类型选择 -->
			<view class="type">
				<view class="u-demo-block__content">
					<u-row justify="space-between" gutter="10">
						<u-col span="3">
							<view class="demo-layout" style="text-align: center;">
								<view style="display: flex;flex-direction: column;align-items: center;">
									<image @click="rankingList()" style="height: 45px;width: 45px;"
										src="/static/img/type/paihangbang.png">
									</image>
									<text style="font-size: 5px;">排行榜</text>
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view style="text-align: center;">
								<view style="display: flex;flex-direction: column;align-items: center;">
									<image @click="film" style="height: 45px;width: 45px;"
										src="/static/img/type/dianying.png">
									</image>
									<text style="font-size: 5px;">电影</text>
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view style="text-align: center;">
								<view style="display: flex;flex-direction: column;align-items: center;">
									<image @click="anime" style="height: 45px;width: 45px;"
										src="/static/img/type/dongman.png">
									</image>
									<text style="font-size: 5px;">动漫</text>
								</view>
							</view>
						</u-col>
						<u-col span="3">
							<view style="text-align: center;">
								<view style="display: flex;flex-direction: column;align-items: center;">
									<image style="height: 45px;width: 45px;" src="/static/img/type/saixuan.png"
										@click="filter()">
									</image>
									<text style="font-size: 5px;">筛选</text>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<!-- 影视列表 -->
			<view class="hot">
				<view class="module-top">
					<text style="font-weight: bold;font-size: 18px;margin-left: 10px;">热门国漫</text>
					<view class="u-page__button-item" style="position: absolute;right: 15px;">
						<u-button text="更多>" @click="more(4,1)" shape="circle" size="mini" style="width: 10px;" type="info"></u-button>
					</view>
				</view>
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(listItem,listIndex) in cnAnimeList" :key="listIndex">
						<image class="vodImg" :src="listItem.vodPic" @click="imgClick(listItem.vodId)">
						</image>
						<text class="grid-text"
							style="width: 100px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{listItem.vodName}}</text>
					</u-grid-item>
				</u-grid>
			</view>

			<view class="hot">
				<view class="module-top">
					<text style="font-weight: bold;font-size: 18px;margin-left: 10px;">热门番剧</text>
					<view class="u-page__button-item" style="position: absolute;right: 15px;">
						<u-button text="更多>" @click="more(4,2)" shape="circle" size="mini" style="width: 10px;" type="info"></u-button>
					</view>
				</view>
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(listItem,listIndex) in jaAnimeList" :key="listIndex">
						<image class="vodImg" :src="listItem.vodPic" @click="imgClick(listItem.vodId)">
						</image>
						<text class="grid-text"
							style="width: 100px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{listItem.vodName}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			
			<view class="hot">
				<view class="module-top">
					<text style="font-weight: bold;font-size: 18px;margin-left: 10px;">热门电影</text>
					<view class="u-page__button-item" style="position: absolute;right: 15px;">
						<u-button text="更多>" @click="more(1,0)" shape="circle" size="mini" style="width: 10px;" type="info"></u-button>
					</view>
				</view>
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(listItem,listIndex) in filmList" :key="listIndex">
						<image class="vodImg" :src="listItem.vodPic" @click="imgClick(listItem.vodId)">
						</image>
						<text class="grid-text"
							style="width: 100px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{listItem.vodName}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			
			<view class="hot">
				<view class="module-top">
					<text style="font-weight: bold;font-size: 18px;margin-left: 10px;">热门综艺</text>
					<view class="u-page__button-item" style="position: absolute;right: 15px;">
						<u-button text="更多>" @click="more(3,1)" shape="circle" size="mini" style="width: 10px;" type="info"></u-button>
					</view>
				</view>
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(listItem,listIndex) in varietyList" :key="listIndex">
						<image class="vodImg" :src="listItem.vodPic" @click="imgClick(listItem.vodId)">
						</image>
						<text class="grid-text"
							style="width: 100px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{listItem.vodName}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			
			<view class="hot">
				<view class="module-top">
					<text style="font-weight: bold;font-size: 18px;margin-left: 10px;">热门电视剧</text>
					<view class="u-page__button-item" style="position: absolute;right: 15px;">
						<u-button text="更多>" @click="more(2,1)" shape="circle" size="mini" style="width: 10px;" type="info"></u-button>
					</view>
				</view>
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(listItem,listIndex) in teleplayList" :key="listIndex">
						<image class="vodImg" :src="listItem.vodPic" @click="imgClick(listItem.vodId)">
						</image>
						<text class="grid-text"
							style="width: 100px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{listItem.vodName}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- ========================================== -->
	</view>
</template>

<script>
	import {
		http
	} from '@/config/common.js'
	import {
		toRefs
	} from "vue"
	import Upgrade from '@/utils/upgrade/upgrade.js'
	const upgrade = new Upgrade()
	var {
		progress,
		latestVersion
	} = toRefs(upgrade)
	export default {
		data() {
			return {
				progress,
				isdownload: false,
				newVersion: false,
				latestVersion,
				profilePhotoUrl: '/static/img/tabbar/me.png',
				search: "",
				adList: [],
				inform: "功能持续开发中。。。   网页版现已推出：ikan.wang",
				cnAnimeList: [],
				jaAnimeList: [],
				teleplayList:[],
				varietyList:[],
				filmList: []

			};
		},
		onLoad() {
			//检测版本
			upgrade.checkVersion().then(isLatest => {
				if (!isLatest) {
					this.newVersion = true;
				}
			})

			this.getHotVodInfo("cnAnimeList", "动漫", "中国", 12);
			this.getHotVodInfo("jaAnimeList", "动漫", "日本", 12);
			this.getHotVodInfo("teleplayList", "剧", "中国", 12);
			this.getHotVodInfo("varietyList", "综艺", "中国", 12);
			this.getHotVodInfo("filmList", "片", "", 12);
			this.getAd();
		},
		onShow() {
			//从缓存中获取用户数据
			//已经登录才从缓存读取数据
			if (getApp().globalData.isLogin) {
				var data;
				//从缓存中获取user
				try {
					var res = uni.getStorageSync('user')
					if (res) {
						data = res
					}
				} catch (e) {
					// error
					console.log(e)
				}
				this.profilePhotoUrl = data.profilePhotoUrl ? data.profilePhotoUrl :
					"/static/img/tabbar/me.png";
			}
		},
		methods: {
			download() {
				this.newVersion = false;
				this.isdownload = true;
				//下载资源
				var ok = upgrade.updatePackage();
			},
			cancel() {
				this.newVersion = false;
			},
			//获取广告
			getAd() {
				http.get('/ad/adOrAm/1', {}).then(res => {
					const data = res.data.data;
					var list = [];
					for (var i = 0; i < data.length; i++) {
						list[i] = {
							'url': data[i].img
						};
					}
					this.adList = list;
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取推荐内容 current:当前页 size:每页数据量
			getHotVodInfo(listName, typeName, area, size) {
				http.get('/vod/hotVodMonthTypeAreaWithHitsMonth', {
					params: {
						typeName: typeName,
						area: area,
						size: size
					}
				}).then(res => {
					switch (listName) {
						case "cnAnimeList": {
							this.cnAnimeList = res.data.data;
							break;
						}
						case "filmList": {
							this.filmList = res.data.data;
							break;
						}
						case "jaAnimeList": {
							this.jaAnimeList = res.data.data;
							break;
						}
						case "teleplayList": {
							this.teleplayList = res.data.data;
							break;
						}
						case "varietyList": {
							this.varietyList = res.data.data;
							break;
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			searchClick() {
				uni.navigateTo({
					url: '/pages/search/search',
				})
			},
			//点击更多
			more(pTypeIndex,areaIndex){
				uni.navigateTo({
					url: '/pages/filter/filter?pTypeIndex='+pTypeIndex+'&areaIndex='+areaIndex+'&otherIndex=1',
				})
			},
			//点击音频事件
			imgClick(data) {
				//data：vodId
				uni.navigateTo({
					url: '/pages/video/video?vodId=' + data,
				})
			},
			//点击历史记录
			history() {
				if (!getApp().globalData.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login',
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/history/history',
				})
			},
			//点击筛选事件
			filter() {
				uni.navigateTo({
					url: '/pages/filter/filter',
				})
			},
			//排行榜点击事件
			rankingList() {
				uni.navigateTo({
					url: '/pages/rankingList/rankingList',
				})
			},
			//电影点击事件
			film() {
				uni.navigateTo({
					url: '/pages/rankingList/rankingList?tabIndex=0&type=片',
				})
			},
			//动漫点击事件
			anime() {
				uni.navigateTo({
					url: '/pages/rankingList/rankingList?tabIndex=1&type=动漫',
				})
			}
		}
	};
</script>

<style lang="scss">
	.container {
		text-align: center;
		height: 100%;
	}

	.content {
		width: 95%;
		height: 100%;
		margin: 0 0 10px 10px;
	}

	.status_bar {
		height: auto;
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 5555;
		background-color: #ffffff;
		box-shadow: 10px 5px 5px #eeeeee;
	}

	.slideshow {
		margin-top: 10px;
		height: 150px;
	}

	.slideshow-item {
		height: 150px;
		width: 100%;
		text-align: center;
	}

	.type {
		margin-top: 10px;
		border-radius: 100px;
		box-shadow: 5px 5px 15px 5px #d8d8d8;
	}

	.hot {
		margin-top: 10px;
		background: #ffffff;
		border-radius: 10px;
		box-shadow: 5px 5px 15px 5px #d8d8d8;
	}

	.vodImg {
		width: 90%;
		height: 22vh;
		object-fit: cover;
		background-color: #eeeeee;
		border-radius: 10px;
	}

	.module-top {
		display: flex;
	}
</style>